<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="description" content="Validate, format, and compare two JSON documents.  See the differences between the objects instead of just the new lines and mixed up properties.">
        <title>JSON对比</title>
        <link rel="icon" href="favicon.png"/>
        <link rel="stylesheet" href="reset.css" type="text/css" media="screen">
        <link rel="stylesheet" href="throbber.css" type="text/css" media="screen">
        <link rel="stylesheet" href="jdd.css" type="text/css" media="screen">

        <script src="jsl/jsl.format.js" type="text/javascript" charset="utf-8"></script>
        <script src="jsl/jsl.parser.js" type="text/javascript" charset="utf-8"></script>
        <script src="jdd.js" type="text/javascript" charset="utf-8"></script>
        <script src="jsl/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script>

            /**
             * json格式化
             */
            function jsonFormat() {
                const val = $("#textarealeft").val();
                // console.log(`val: ${val}`);
                const formatVal = jsl.format.formatJson(val);
                $("#textarealeft").val(formatVal);
            }

        </script>

    </head>
    <body>
        <div id="main">
            <div class="header">
                <h1>JSON对比工具</h1>
            </div>

            <div class="initContainer">
                <div class="left">
                    <textarea spellcheck="false" id="textarealeft" placeholder="Enter JSON to compare, enter an URL to JSON" tabindex="1"></textarea>
                    <pre id="errorLeft" class="error"></pre>
                    <span class="fileInput">or <input type="file" id="fileLeft" onchange="jdd.handleFiles(this.files, 'left')" tabindex="4"></span>
                </div>

                <div class="center">
                    <div class="btn">
                        <button id="compare" >Compare</button>
                        <button id="format-btn" onclick="jsonFormat()">Format</button>
                    </div>
    
                    <div class="throbber-loader"></div>
                    <br/><br/>
                    or try some<br /><a href="#" id="sample">sample data</a>
                </div>

                <div class="right">
                    <textarea spellcheck="false" class="right" id="textarearight" placeholder="Enter JSON to compare, enter an URL to JSON" tabindex="2"></textarea>
                    <pre id="errorRight" class="error"></pre>
                    <span class="fileInput">or <input type="file" id="fileRight" onchange="jdd.handleFiles(this.files, 'right')" tabindex="5"></span>
                </div>
            </div>

            <div class="diffcontainer">
                <div id="report">
                </div>
                <pre id="out" class="left" class="codeBlock"></pre>
                <pre id="out2" class="right" class="codeBlock"></pre>
                <!-- <ul id="toolbar" class="toolbar"></ul> -->
            </div>
        </div>
    </body>
</html>
